<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="1300px">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="状态" prop="status_use">
				<el-select v-model="queryParams.status_use">
					<el-option label="全部" value="" />
					<el-option label="待使用" value="0" />
					<el-option label="使用成功" value="1" />
					<el-option label="使用失败" value="2" />
					<el-option label="退款退回" value="3" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mt8 mb8">
			<!-- <el-col :span="1.5">
				<el-button @click="onExport" type="warning" plain icon="el-icon-download">导出</el-button>
			</el-col> -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="ID" align="center" prop="id" />
			<el-table-column label="优惠券名称" align="center" prop="name" />
			<el-table-column label="用户昵称" align="center" prop="user_name" />
			<el-table-column label="类型" align="center" prop="type" :formatter="formatterType" />
			<el-table-column label="使用方式" align="center" prop="way" :formatter="formatterWay" />
			<el-table-column label="最低消费" align="center" prop="money_full" />
			<el-table-column label="优惠金额" align="center" prop="money" />
			<el-table-column label="优惠折扣" align="center" prop="discount" />
			<el-table-column label="优惠上限" align="center" prop="discount_cap" />
			<el-table-column label="开始时间" align="center" prop="start_time" :formatter="formatterStartTime" />
			<el-table-column label="结束时间" align="center" prop="end_time" :formatter="formtterEndTime" />
			<el-table-column label="优惠券数量" align="center" prop="num" />
			<el-table-column label="剩余数量" align="center" prop="residue_num" />
			<!-- <el-table-column label="说明" align="center" prop="illustrate" /> -->
			<!-- <el-table-column label="创建时间" align="center" prop="create_time" :formatter="formatterCreateTime" /> -->
			<el-table-column label="优惠券状态" align="center">
        <template #default="{ row }">
          {{ Number(row.status) ? '启用' : '禁用' }}
        </template>
      </el-table-column>
			<el-table-column label="使用状态" align="center" prop="status_use">
				<template #default="{ row }">
					{{ Number(row.residue_num) ? '未使用' : '已使用' }}
				</template>
			</el-table-column>
		</el-table>

    <pagination-component
		v-show="total > 0"
		:total="total"
		v-model:page="queryParams.pageNum"
		v-model:limit="queryParams.pageSize"
		@pagination="getList"
	/>
	</el-dialog>
</template>

<script>
import { ElLoading } from 'element-plus';
import { couponApi, userList } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import { handleDownloadByName } from '/@/utils/utils';

const CouponApi = couponApi();
let start_page = 1; // 导出数据默认页数
let start_page_total = 1; // 导出数据订单总页数
export default {
	data() {
		return {
			title: '优惠券领取记录',
			open: false,
			showSearch: true,
			queryParams: {
				pageNum: 1,
				pageSize: 20,
				status_use: '',
				coupon_id: '',
				start_page: 1,
			},
			userIdSelect: {
				loading: true,
				options: [],
			},
			total: 0,
			tableList: [],
			loading: false,
		};
	},
	methods: {
		/********** 点击事件(on开头) **********/
		// 用户昵称获取焦点
		onUserIdFocus() {
			!this.queryParams.user_id && this._userList({ pageNum: 1, pageSize: 10 });
		},
		// 搜索
		onQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		// 重置
		onResetQuery() {
			this.$refs.queryFormRef.resetFields();
			this.onQuery();
		},
		// 导出
		onExport() {
			this.loadingExportRef = ElLoading.service({
				lock: true,
				text: '正在下载，请耐心等待...',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			this._couponImportExport(this.queryParams);
		},

		/********** 方法事件 **********/
		// 打开
		openDialog(config) {
			this.title = `「${config.row.name}」优惠券领取记录`;
			this.open = true;
			this.$nextTick(() => {
				this.$refs.queryFormRef.resetFields();
				this.queryParams.coupon_id = config.row.id;
				this.onQuery();
			});
		},
		getList() {
			this.loading = true;
			this._couponGrantList(this.queryParams);
		},
		// 状态
		formatterStatus(row) {
			switch (row.status_use) {
				case 0:
					return '待使用';
				case 1:
					return '使用成功';
				case 2:
					return '使用失败';
        case 3:
					return '退款退回';
				default:
					return '未知';
			}
		},
    // 类型
    formatterType(row) {
      switch (Number(row.type)) {
        case 1:
          return '满减券';
        case 2:
          return '折扣券';
        default:
          return '';
      }
    },
    // 使用方式
    formatterWay(row) {
      switch (Number(row.type)) {
        case 1:
          return '全场通用';
        case 2:
          return '指定商品';
        default:
          return '';
      }
    },
    // 开始时间
		formatterStartTime(row) {
			return timeDictionary(row.start_time);
		},
    // 结束时间
		formtterEndTime(row) {
			return timeDictionary(row.end_time);
		},
		// 创建时间
		formatterCreateTime(row) {
			return timeDictionary(row.create_time);
		},

		/********** 网络请求 **********/
		// 优惠券使用记录
		_couponGrantList(params) {
			CouponApi.couponGrantList(params)
				.then((res) => {
					this.tableList = res.data.list;
          this.total = res.data.total;
					this.loading = false;
				})
				.catch(() => (this.loading = false));
		},
	},
};
</script>
